<template>
  <div class="volunteer_School">
    <div class="volunteer_bottom">
      <div class="header_search">
        <div class="search_header_left">
          <h3>我的高考成绩</h3>

          <div class="my_achievement">
            <span>
<<<<<<< HEAD
              {{UserLsit.provinceName}}省/{{UserLsit.estimateScore +"分"}}/
              {{UserLsit.gradeName}}
            </span>
=======
              {{MyNews.provinceName}}省/{{MyNews.estimateScor}}/
              {{MyNews.grade == '0' ? "理科" : MyNews.grade == '1' ? "文科" : MyNews.grade == '2' ? "新高考" : "null" }}
            </span>
            <i class="el-icon-edit-outline"></i>
>>>>>>> 314b442cce11d658746227581b0160373004c345
          </div>
        </div>
        <div class="search_header_right">
          <h3>批次</h3>
          <!-- <el-dropdown split-button type="primary" trigger="click" @command="handleBatch">
            <span
              v-for="(BatchID  ) in suitableBatch"
              :key="BatchID.id"
            >{{BatchID.id == batchs ? BatchID.batchName : '本科' }}</span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item
                v-for=" (BatchID  ) in suitableBatch"
                :key="BatchID.id"
                :command="BatchID.id"
              >{{BatchID.batchName}}</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>-->
          <el-dropdown split-button type="primary" trigger="click" @command="handleBatch">
            <span class="span">
              {{
<<<<<<< HEAD
              Gender.batchName
              }}
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item
                v-for=" ( item ,index ) in suitableBatch"
                :key="index"
                :command="item"
              >{{item.batchName}}</el-dropdown-item>
=======
              batchs == 0 ? "本科"
              : "专科"
              }}批
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="0">本科批</el-dropdown-item>
              <el-dropdown-item command="4">专科批</el-dropdown-item>
>>>>>>> 314b442cce11d658746227581b0160373004c345
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
      <div class="volunteer_centent">
<<<<<<< HEAD
        <div @click="golookschool(0,SchoolList.punching)" class="punching">
          <div class="Tips" v-if="SchoolList.punching == 0">
            <div class="tips_in" v-if="i == 0 ">
              <h5>没有适合的学校</h5>
            </div>
          </div>
          <h3>冲</h3>
          <h4>可冲击的大学</h4>
=======
        <router-link
          :to="{
        name:'/ChooseSchool',
        params:{
          id : 0,
          batch:batchs,
          type:0
        }
       }"
          tag="div"
          class="punching"
        >
          <h3>冲</h3>
          <h4>可冲击录取大学</h4>
>>>>>>> 314b442cce11d658746227581b0160373004c345
          <p>大学录取可能性低</p>
          <span>
            {{SchoolList.punching}}所
            <i class="iconfont">&#xe733;</i>
          </span>
<<<<<<< HEAD
        </div>
        <div @click="golookschool(1,SchoolList.stable)" class="stable">
          <div class="Tips" v-if="SchoolList.stable == 0">
            <div class="tips_in" v-if="i == 1 ">
              <h5>没有适合的学校</h5>
            </div>
          </div>
=======
        </router-link>
        <router-link
          :to="{
        name:'/ChooseSchool',
        params:{
          id : 1,
           batch:batchs,
           type:0
        }
       }"
          tag="div"
          class="stable"
        >
>>>>>>> 314b442cce11d658746227581b0160373004c345
          <h3>稳</h3>
          <h4>较稳妥的大学</h4>
          <p>大学录取的可能性较高</p>
          <span>
            {{SchoolList.stable}}所
            <i class="iconfont">&#xe733;</i>
          </span>
<<<<<<< HEAD
        </div>
        <div @click="golookschool(2 ,SchoolList.protect)" class="stable">
          <div class="Tips" v-if="SchoolList.protect == 0">
            <div class="tips_in" v-if="i == 2 ">
              <h5>没有适合的学校</h5>
            </div>
          </div>
=======
        </router-link>
        <router-link
          :to="{
        name:'/ChooseSchool',
        params:{
          id : 2,
           batch:batchs,
           type:0
        }
       }"
          tag="div"
          class="Protect"
        >
>>>>>>> 314b442cce11d658746227581b0160373004c345
          <h3>保</h3>
          <h4>可保底的大学</h4>
          <p>大学录取的可能性非常高</p>
          <span>
            {{SchoolList.protect}}所
            <i class="iconfont">&#xe733;</i>
          </span>
<<<<<<< HEAD
        </div>
=======
        </router-link>
>>>>>>> 314b442cce11d658746227581b0160373004c345
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "School",
  data() {
    return {
<<<<<<< HEAD
      SchoolList: {},
      i: 10,
      UserLsit: "",
      Gender: "",
      suitableBatch: ""
    };
  },
  methods: {
    golookschool(e, Num) {
      if (Num == 0) {
        this.i = e;
      } else {
        let userInfo = JSON.parse(localStorage.getItem("userInfo"));
        var vip = userInfo.userEntity.vip;
        if (vip > 1) {
          this.$router.push({
            name: "/ChooseSchool",
            params: {
              id: e,
              batch: this.Gender.id,
              type: 0
            }
          });
        } else {
          this.$router.push({
            path: "/MyMember/Member/3"
          });
        }
      }
    },
=======
      batchs: "0",
      SchoolList: {},
      suitableBatch: "",
      MyNews: {
        examinationYear: localStorage.getItem("examinationYear"),
        estimateRanking: localStorage.getItem("estimateRanking"),
        estimateScor: localStorage.getItem("estimateScore"),
        grade: localStorage.getItem("grade"),
        provinceName: localStorage.getItem("provinceName"),
        examinationProvince: localStorage.getItem("examinationProvince")
      }
    };
  },
  methods: {
>>>>>>> 314b442cce11d658746227581b0160373004c345
    open3(s) {
      this.$message.error(s);
    },
    getSchool() {
      this.$ajax({
        method: "POST",
        url: "/api/volunteer/priorityApplication",
        data: {
<<<<<<< HEAD
          batch: this.Gender.id
=======
          batch: this.batchs
>>>>>>> 314b442cce11d658746227581b0160373004c345
        },
        success: res => {
          if (res.data.code == 0) {
            this.SchoolList = res.data.data;
          } else {
            this.open3(res.data.msg);
          }
        }
      });
    },
<<<<<<< HEAD
    getUserLsit() {
      this.$ajax({
        method: "POST",
        url: "/api/query/userInfo",

        success: res => {
          if (res.data.code == 0) {
            this.UserLsit = res.data.data;
          }
        }
      });
    },
    handleBatch(batchs) {
      this.Gender = batchs;
      this.getSchool();
    },
    getBatch() {
      this.$ajax({
        method: "POST",
        url: "/api/voluntary/targetBatch",

        success: res => {
          if (res.data.code == 0) {
            this.Gender = res.data.data.suitableBatch[0];

            this.suitableBatch = res.data.data.suitableBatch;

            var str = res.data.data.suitableBatch;
            var j = [];
            str.forEach(e => {
              j.push(e.id);
              return j;
            });

            var Undergraduate = j[0];
            var Specialty = j[1];
            localStorage.setItem("Undergraduate", Undergraduate);
            localStorage.setItem("Specialty", Specialty);
            this.getSchool();
          }
        }
      });
=======
    handleBatch(batchs) {
      this.batchs = batchs;
      this.getSchool();
>>>>>>> 314b442cce11d658746227581b0160373004c345
    }
  },

  beforeCreate() {
    this.$nextTick(() => {
<<<<<<< HEAD
      this.getUserLsit();
      this.getBatch();
=======
      this.getSchool();
>>>>>>> 314b442cce11d658746227581b0160373004c345
    });
  }
};
</script>
<style lang="scss">
.volunteer_School {
<<<<<<< HEAD
  .Tips {
    position: absolute;
    width: 100%;
    height: 100%;

    .tips_in {
      background: rgba($color: #000000, $alpha: 0.6);
      width: 100%;
      height: 100%;
      h5 {
        padding-top: 100px;
        font-size: 20px;
        color: #fff;
        text-align: center;
      }
    }
  }
=======
>>>>>>> 314b442cce11d658746227581b0160373004c345
  .header_search {
    margin-bottom: 34px;
    display: flex;
    justify-content: space-between;
    width: 710px;

    .search_header_left {
      > h3 {
        padding-bottom: 22px;
      }
      .my_achievement {
        display: flex;
        background: #f8f8f8;
        border-color: #f8f8f8;
        border-radius: 4px;
        color: #818181;
        > span {
          display: block;
          line-height: 36px;
          padding-left: 18px;
          width: 200px;
        }
        > i {
          padding: 14px;
          font-size: 12px;
        }
      }
    }
    .search_header_right {
      > h3 {
        padding-bottom: 22px;
      }
      .el-button-group {
        .span {
          padding-right: 100px;
        }
      }
      .el-button--primary {
        color: #818181;
        background: #f8f8f8;
        border-color: #f8f8f8;
        span {
          width: 78px;
        }
      }
      .el-dropdown .el-dropdown__caret-button::before {
        background: #f8f8f8;
      }
      .el-dropdown .el-dropdown__caret-button:hover {
        background: #f8f8f8;
        height: 100%;
      }
    }
  }
  .volunteer_bottom {
    width: 1000px;
    height: 682px;
    padding: 100px;
    background: #fff;
    border-radius: 3px;

    > h4 {
      font-size: 14px;
      color: #414141;
      .iconfont {
        display: inline-block;
        font-size: 13px;
        transform: rotate(90deg);
        position: relative;
        top: 1px;
      }
    }

    .volunteer_centent {
      display: flex;
      > div {
        margin-right: 64px;
        cursor: pointer;
      }
      .punching {
        height: 240px;
        width: 240px;
        margin-top: 34px;
        display: flex;
        flex-direction: column;
        border-radius: 12px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
<<<<<<< HEAD
        position: relative;
=======
>>>>>>> 314b442cce11d658746227581b0160373004c345
        h3 {
          font-size: 24px;
          color: #fff;
          background: #4387f6;
          width: 44px;
          height: 44px;
          text-align: center;
          line-height: 44px;
          margin: 0 auto;
          margin-top: 38px;
          border-radius: 50%;
          margin-bottom: 24px;
        }
        h4 {
          text-align: center;
          font-size: 16px;
          color: #414141;
        }
        p {
          text-align: center;
          color: #787878;
          font-size: 14px;
          line-height: 48px;
        }
        span {
          font-size: 14px;
          text-align: center;
          color: #787878;
          font-size: 14px;
          line-height: 42px;
          .iconfont {
            display: inline-block;
            font-size: 13px;
            transform: rotate(270deg);
            position: relative;
            top: -2px;

            color: #2e86ff;
          }
        }
      }
      .stable {
<<<<<<< HEAD
        position: relative;
=======
>>>>>>> 314b442cce11d658746227581b0160373004c345
        height: 240px;
        width: 240px;
        margin-top: 34px;
        display: flex;
        flex-direction: column;
        border-radius: 12px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
        h3 {
          font-size: 24px;
          color: #fff;
          background: #f19147;
          width: 44px;
          height: 44px;
          text-align: center;
          line-height: 44px;
          margin: 0 auto;
          margin-top: 38px;
          border-radius: 50%;
          margin-bottom: 24px;
        }
        h4 {
          text-align: center;
          font-size: 16px;
          color: #414141;
        }
        p {
          text-align: center;
          color: #787878;
          font-size: 14px;
          line-height: 48px;
        }
        span {
          font-size: 14px;
          text-align: center;
          color: #787878;
          font-size: 14px;
          line-height: 42px;
          .iconfont {
            display: inline-block;
            font-size: 13px;
            transform: rotate(270deg);
            position: relative;
            top: -2px;

            color: #2e86ff;
          }
        }
      }
      .Protect {
<<<<<<< HEAD
        position: relative;
=======
>>>>>>> 314b442cce11d658746227581b0160373004c345
        height: 240px;
        width: 240px;
        margin-top: 34px;
        display: flex;
        flex-direction: column;
        border-radius: 12px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
        h3 {
          font-size: 24px;
          color: #fff;
          background: #f7ce38;
          width: 44px;
          height: 44px;
          text-align: center;
          line-height: 44px;
          margin: 0 auto;
          margin-top: 38px;
          border-radius: 50%;
          margin-bottom: 24px;
        }
        h4 {
          text-align: center;
          font-size: 16px;
          color: #414141;
        }
        p {
          text-align: center;
          color: #787878;
          font-size: 14px;
          line-height: 48px;
        }
        span {
          font-size: 14px;
          text-align: center;
          color: #787878;
          font-size: 14px;
          line-height: 42px;
          .iconfont {
            display: inline-block;
            font-size: 13px;
            transform: rotate(270deg);
            position: relative;
            top: -2px;

            color: #2e86ff;
          }
        }
      }
    }
  }
}
</style>